import { Card, Table, Image } from 'antd';
import { useEffect, useState } from 'react';

import suggestService from '@/api/services/setting/suggestService';
import { Iconify } from '@/components/icon';
import TipIconButton from '@/components/icon/tooltip-icon-button';
import { datetime } from '@/utils/format-date';
import { pagination } from '@/utils/pagination';

import { IndexModal } from './modal';
import { SuggestType } from './type';

import { ListData, ModalProps, SearchData } from '#/entity';

export default function Suggest() {
  const [tableData, setTableData] = useState<ListData<SuggestType>>();
  const [searchData, setSearchData] = useState<SearchData>({
    page: 1,
    take: 10,
  });
  useEffect(() => {
    suggestService.list(searchData).then((data) => {
      setTableData(data);
    });
  }, [searchData]);
  const columns = [
    {
      title: '反馈图片',
      dataIndex: 'file',
      render: (file) => (
        <div>{file ? <Image src={`${file}`} width={80} /> : ''}</div>
      ),
    },
    {
      fixed: 'left' as const,
      width: 150,
      title: '反馈标题',
      dataIndex: 'title',
    },
    {
      width: 200,
      title: '反馈内容',
      dataIndex: 'textual',
    },
    {
      title: '反馈人',
      dataIndex: 'contactName',
    },
    {
      title: '反馈人电话',
      dataIndex: 'contactPhone',
    },

    {
      title: '反馈时间',
      dataIndex: 'createAt',
      render: (createAt) => datetime(createAt),
    },
    {
      width: 200,
      title: '回答内容',
      dataIndex: 'answer',
    },
    {
      title: '回答人',
      dataIndex: 'user',
      render: (user) => user?.name,
    },
    {
      title: '回答人电话',
      dataIndex: 'user',
      render: (user) => user?.mobile.option,
    },

    {
      title: '回答时间',
      dataIndex: 'answerAt',
      render: (answerAt) => datetime(answerAt),
    },
    {
      fixed: 'right' as const,
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_: any, record: any) => (
        <div className="flex w-full justify-end text-gray">
          <TipIconButton onClick={() => onEdit(record)} tipText="修改该条推广">
            <Iconify icon="solar:pen-bold-duotone" size={18} />
          </TipIconButton>
        </div>
      ),
    },
  ];
  const [modalPorps, setModalPorps] = useState<ModalProps<SuggestType>>({
    title: '意见反馈',
    show: false,
    formValue: {},
    onOk: () => {
      setModalPorps({
        ...modalPorps,
        show: false,
      });
      setSearchData({
        ...searchData,
        page: 1,
      });
    },
    onCancel: () => {
      setModalPorps({
        ...modalPorps,
        show: false,
      });
    },
  });
  const onEdit = (record) => {
    setModalPorps({
      ...modalPorps,
      show: true,
      formValue: record,
    });
  };
  return (
    <div>
      {/* <Seach /> */}
      <Card title="意见反馈">
        <Table
          rowKey="id"
          size="small"
          dataSource={tableData?.data}
          columns={columns}
          scroll={{ x: 'max-content' }}
          pagination={pagination({
            page: searchData, onPageChange: (page, rows) => {
              setSearchData((prev) => ({
                ...prev,
                page,
                take: rows,
              }));
            }, count: tableData?.count
          })}
        />
      </Card>
      <IndexModal {...modalPorps} />
    </div>
  );
}
